<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Stu Nicholls | CSSplay | A fade-in image</title>
<meta name="Author" content="Stu Nicholls">
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, opacity, experiments,demonstrations picture, fade in ">
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS">
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=">
<meta http-equiv="imagetoolbar" content="no">


<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels">
<meta http-equiv="pics-Label" content="(pics-1.1 &quot;http://www.icra.org/pics/vocabularyv03/&quot; l gen true for &quot;http://cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for &quot;http://www.cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml">
<link rel="shortcut icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/ico">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<link rel="stylesheet" media="all" type="text/css" href="fade_files/default.css">


<style type="text/css">
#info {position:relative; height:660px;}
#info b {font-size:14px; font-style:italic;}

#magnifier {display:inline; position:relative; width:640px; height:40px; z-index:100; float:left; margin:0 20px 10px 15px; background:url(fade_in.gif) no-repeat;}
#cover1 {position:absolute; top:0; left:0; width:24px; height:30px; background:transparent;}
#cover2 {position:absolute; top:0; left:48px; width:240px; height:30px; background:transparent;}
#description {position:absolute; top:40px; z-index:-1;}
#magnifier img {position:absolute; width:640px; height:460px; top:30px; left:-9999px; opacity:0;}

#magnifier ul {padding:0; border:0; margin:0; list-style-type:none;} 


#magnifier li {display:block; width:24px; height:24px; position:absolute; left:24px; top:0;  background:transparent;}

#magnifier li.one {left:0;}

#magnifier li:hover {width:24px; height:24px; left:0;}
#magnifier li.ten:hover {width:24px; height:24px; left:24px;}

#magnifier li.one:hover img {width:640px; height:460px; left:-240px; opacity:0.1; z-index:100;} 
#magnifier li.two:hover img {width:640px; height:460px; left:-216px; opacity:0.2; z-index:100;} 
#magnifier li.three:hover img {width:640px; height:460px; left:-192px; opacity:0.3; z-index:100;} 
#magnifier li.four:hover img {width:640px; height:460px; left:-168px; opacity:0.4; z-index:100;} 
#magnifier li.five:hover img {width:640px; height:460px; left:-144px; opacity:0.5; z-index:100;} 
#magnifier li.six:hover img {width:640px; height:460px; left:-120px; opacity:0.6; z-index:100;} 
#magnifier li.seven:hover img {width:640px; height:460px; left:-96px; opacity:0.7; z-index:100;} 
#magnifier li.eight:hover img {width:640px; height:460px; left:-72px; opacity:0.8; z-index:100;} 
#magnifier li.nine:hover img {width:640px; height:460px; left:-48px; opacity:0.9; z-index:100;} 
#magnifier li.ten:hover img {width:640px; height:460px; left:-48px; opacity:1.0; z-index:100;} 
#magnifier li.eleven:hover img {width:640px; height:460px; left:-24px; opacity:0} 

</style>

<!--[if IE 7]>
<style type="text/css">

#magnifier img {left:-9999px; filter: alpha(opacity=0);}

#magnifier li {height:20px;}

#magnifier li.one:hover img {width:640px; height:460px; left:-240px; filter: alpha(opacity=10); z-index:100;} 
#magnifier li.two:hover img {width:640px; height:460px; left:-216px; filter: alpha(opacity=20); z-index:100;} 
#magnifier li.three:hover img {width:640px; height:460px; left:-192px; filter: alpha(opacity=30); z-index:100;} 
#magnifier li.four:hover img {width:640px; height:460px; left:-168px; filter: alpha(opacity=40); z-index:100;} 
#magnifier li.five:hover img {width:640px; height:460px; left:-144px; filter: alpha(opacity=50); z-index:100;} 
#magnifier li.six:hover img {width:640px; height:460px; left:-120px; filter: alpha(opacity=60); z-index:100;} 
#magnifier li.seven:hover img {width:640px; height:460px; left:-96px; filter: alpha(opacity=70); z-index:100;} 
#magnifier li.eight:hover img {width:640px; height:460px; left:-72px; filter: alpha(opacity=80); z-index:100;} 
#magnifier li.nine:hover img {width:640px; height:460px; left:-48px; filter: alpha(opacity=90); z-index:100;} 
#magnifier li.ten:hover img {width:640px; height:460px; left:-48px; filter: alpha(opacity=100); z-index:100;} 
#magnifier li.eleven:hover img {width:640px; height:460px; left:-24px; filter: alpha(opacity=0);} 
</style>
<![endif]-->




<!--[if lte IE 6]>
<style type="text/css">
#magnifier table {border:0; padding:0; margin:0; border-collapse:collapse;}

#magnifier li {position:static;}
#magnifier img {position:absolute; width:640px; height:460px; top:30px; left:-9999px;filter: alpha(opacity=0);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}

#magnifier li {height:20px;}
#magnifier a {display:block; width:24px; height:24px; left:24px; top:0; position:absolute; background:transparent;}

#magnifier a:hover {border:0;width:24px; height:24px; left:0;}

#magnifier a.aten:hover {border:0; width:24px; height:20px; left:24px;}

#magnifier a.aone:hover img {width:640px; height:460px; left:-240px;filter: alpha(opacity=10);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10); z-index:100;} 
#magnifier a.atwo:hover img {width:640px; height:460px; left:-216px;filter: alpha(opacity=20);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); z-index:100;} 
#magnifier a.athree:hover img {width:640px; height:460px; left:-192px;filter: alpha(opacity=30);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); z-index:100;} 
#magnifier a.afour:hover img {width:640px; height:460px; left:-168px;filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); z-index:100;} 
#magnifier a.afive:hover img {width:640px; height:460px; left:-144px;filter: alpha(opacity=50);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); z-index:100;} 
#magnifier a.asix:hover img {width:640px; height:460px; left:-120px;filter: alpha(opacity=60);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); z-index:100;} 
#magnifier a.aseven:hover img {width:640px; height:460px; left:-96px;filter: alpha(opacity=70);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); z-index:100;} 
#magnifier a.aeight:hover img {width:640px; height:460px; left:-72px;filter: alpha(opacity=80);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); z-index:100;} 
#magnifier a.anine:hover img {width:640px; height:460px; left:-48px;filter: alpha(opacity=90);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); z-index:100;} 
#magnifier a.aten:hover img {width:640px; height:460px; left:-48px;filter: alpha(opacity=100);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); z-index:100;} 
#magnifier a.aeleven:hover img {width:640px; height:460px; left:-24px;filter: alpha(opacity=0);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index:-1;}

</style>
<![endif]-->

<script async="async" src="fade_files/s_1e5949aa72023d7e6519f404fd6280d6.js" id="_bsap_js_1e5949aa72023d7e6519f404fd6280d6" type="text/javascript"></script></head>

<body id="www-cssplay-co-uk">
	<div id="wrapper">
	<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>
		<div id="topad">
	<!-- <img src="http://www.cssplay.co.uk/newweb/ads/468x60.gif" alt="" /> -->
	<div style="float:left; width:468px; height:60px;">
	<script type="text/javascript">
Vertical1242022 = false;
ShowAdHereBanner1242022 = true;
RepeatAll1242022 = false;
NoFollowAll1242022 = false;
BannerStyles1242022 = new Array(
    "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;}",
    "img{border:0;}",
    "a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;}",
    "a.adhere:hover{background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1242022/1242022.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script><script src="fade_files/1242022.js" type="text/javascript"></script><style type="text/css">div.bsap_1242022 {width:100%;display:block;} div.bsap_1242022 a{width:468px;} div.bsap_1242022 a img{padding:0;} div.bsap_1242022 a em{font-style:normal;} div.bsap_1242022 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;} div.bsap_1242022 img{border:0;} div.bsap_1242022 a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;} div.bsap_1242022 a.adhere:hover{background:#ddd;color:#333;} div.bsap_1242022 a.adhere{width:468px;height:60px;line-height:480%;} html>body div.bsap_1242022 a.adhere{width:466px;height:58px;} div.bsap_1242022 img.s{height:0;width:0;}div#bsap_1242022 {width:100%;display:block;} div#bsap_1242022 a{width:468px;} div#bsap_1242022 a img{padding:0;} div#bsap_1242022 a em{font-style:normal;} div#bsap_1242022 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;} div#bsap_1242022 img{border:0;} div#bsap_1242022 a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;} div#bsap_1242022 a.adhere:hover{background:#ddd;color:#333;} div#bsap_1242022 a.adhere{width:468px;height:60px;line-height:480%;} html>body div#bsap_1242022 a.adhere{width:466px;height:58px;} div#bsap_1242022 img.s{height:0;width:0;}</style><script type="text/javascript" src="fade_files/bsa.js" id="bsap_js"></script><div id="bsap_1242022" class="bsap_1242022 bsap"><a href="http://buysellads.com/buy/detail/13607/zone/1242022?utm_source=site_13607_zone_1242022&amp;utm_medium=website&amp;utm_campaign=adhere" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
</div>
	<img src="fade_files/shadow_logo.png" alt="">
	<a href="http://www.ibuilt.net/" title="Website Builder" id="ibuilt"><img src="fade_files/avw.jpeg" alt="Website Builder" title="Website Builder"></a>
	</div>
		<div id="header">
		<div id="logo">
		
			<h1><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page">CSS</a></h1>
			<h2><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page"><i>p</i>lay</a></h2>
			<h3>Experiments with Cascading Style Sheets</h3>
			</div> <!-- end of logo -->
			<div id="toplink">
			<ul>
			<li><a accesskey="W" href="http://www.cssplay.biz/" title="CSSplay.biz Website" rel="nofollow">CSSPLAY.BIZ</a></li>
			<li><a accesskey="H" href="http://www.cssplay.co.uk/service" title="Help and Services">HELP &amp; ASSISTANCE</a></li>
			<li><a accesskey="Q" href="http://www.cssplay.co.uk/faqs" title="Frequently Asked Questions">FAQs</a></li>
			<li><a accesskey="N" href="http://www.cssplay.co.uk/w3c/contact" title="Contact us">CONTACT ME</a></li><li><a accesskey="V" href="http://www.cssplay.co.uk/w3c/privacy" title="Privacy Policy">PRIVACY POLICY</a></li>			<li><a accesskey="S" href="http://www.cssplay.co.uk/sitemap" title="Site map">SITE MAP</a></li>
			<li><a accesskey="K" href="http://www.cssplay.co.uk/accesskeys" title="Accesskeys">ACCESSKEYS</a></li>
			<li><a accesskey="P" href="http://www.cssplay.co.uk/support" title="Support">SUPPORT</a></li>
						<li><a accesskey="R" href="http://www.cssplay.co.uk/feed.xml" title="RSS2.0 feed"><img src="fade_files/rss.png" alt="rss feed" title="RSS2.0 feed"></a></li>

			</ul>
			</div>
			<div id="midlink">
			<ul id="main_menu">
			<li class="demos"><a accesskey="A" href="http://www.cssplay.co.uk/menu/">Demos</a></li><li class="menus"><a accesskey="M" href="http://www.cssplay.co.uk/menus/">Menus</a></li><li class="layouts"><a accesskey="Y" href="http://www.cssplay.co.uk/layouts/">Layouts</a></li><li class="boxes"><a accesskey="B" href="http://www.cssplay.co.uk/boxes/">Boxes</a></li><li class="mozilla"><a accesskey="Z" href="http://www.cssplay.co.uk/mozilla/">Mozilla</a></li><li class="explorer"><a accesskey="E" href="http://www.cssplay.co.uk/ie/">Explorer</a></li><li class="opacity"><a class="chosen" accesskey="O" href="http://www.cssplay.co.uk/opacity/">Opacity</a></li>			<li class="java"><a accesskey="J" href="http://www.stunicholls.com/" title="Over to http://www.stunicholls.com" rel="nofollow">Javascript</a></li>
			</ul>
			</div>
			<div id="botlink">
			<ul id="sub_menu">

			<li><a accesskey="H" href="http://www.cssplay.co.uk/index">HOME</a></li>
			<li><a href="http://www.cssplay.co.uk/opacity/index.html" accesskey="F" title="First - Section List">LIST</a></li><li><a href="http://www.cssplay.co.uk/opacity/picturemenu.html" accesskey="P" title="Previous">PREVIOUS</a></li><li><a href="http://www.cssplay.co.uk/opacity/png.html" accesskey="N" title="Next">NEXT</a></li><li><a href="http://www.cssplay.co.uk/opacity/png2.html" accesskey="L" title="Last">LAST</a></li>			<li><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Fade%20in" accesskey="C" title="Comments for this page">COMMENTS</a></li>
			<li>TUTORIAL</li>			</ul>
			</div> <!-- end of botlink -->
		<div id="search">
<div class="cse-branding-right" style="background-color:transparent;color:#000000">
  <div class="cse-branding-form">
    <form action="http://www.cssplay.co.uk/search.html" id="cse-search-box">
      <div>
        <input name="cx" value="partner-pub-6651950180071236:chrtwm-4ria" type="hidden">
        <input name="cof" value="FORID:10" type="hidden">
        <input name="ie" value="UTF-8" type="hidden">
        <input name="q" size="19" class="search" type="text">
        <input name="sa" value=" Search" type="submit">
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="fade_files/poweredby_AAAAAA.gif" alt="Google">
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>
</div>
		</div> <!-- end of search -->

		</div> <!-- end of header -->
<div id="info">

<h2>Before your very eyes - a fade-in image</h2>
<h3>4th February 2007</h3>
<div id="magnifier">
<ul>
<li class="one"><!--[if lte IE 6]><a class="aone" href="#nogo1"><table><tr><td><![endif]-->
	<ul>
	<li class="two"><!--[if lte IE 6]><a class="atwo" href="#nogo2"><table><tr><td><![endif]-->
		<ul>
		<li class="three"><!--[if lte IE 6]><a class="athree" href="#nogo3"><table><tr><td><![endif]-->
			<ul>
			<li class="four"><!--[if lte IE 6]><a class="afour" href="#nogo4"><table><tr><td><![endif]-->
				<ul>
				<li class="five"><!--[if lte IE 6]><a class="afive" href="#nogo5"><table><tr><td><![endif]-->
					<ul>
					<li class="six"><!--[if lte IE 6]><a class="asix" href="#nogo6"><table><tr><td><![endif]-->
						<ul>
						<li class="seven"><!--[if lte IE 6]><a class="aseven" href="#nogo7"><table><tr><td><![endif]-->
							<ul>
							<li class="eight"><!--[if lte IE 6]><a class="aeight" href="#nogo8"><table><tr><td><![endif]-->
								<ul>
								<li class="nine"><!--[if lte IE 6]><a class="anine" href="#nogo9"><table><tr><td><![endif]-->
									<ul>
									<li class="ten"><!--[if lte IE 6]><a class="aten" href="#nogo10"><table><tr><td><![endif]-->
										<ul>
										<li class="eleven"><!--[if lte IE 6]><a class="aeleven" href="#nogo11"><table><tr><td><![endif]-->
											<img src="fade_files/haywain.jpg" alt="" title="">
										<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
										</ul>
									<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
									</ul>
								<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
								</ul>
							<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
							</ul>
						<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
						</ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
					</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div id="cover1"></div>
<div id="cover2"></div>
<div id="description">
<p><b>The Hay Wain</b> is an oil on canvas painting by John Constable. 
It was finished in 1821 and shows a hay wain near Flatford Mill on the 
River Stour at Flatford, Suffolk.</p>

<p>Flatford Mill was owned by Constable's father and the house on the 
left side belonged to a neighbour, Willy Lott (a tenant farmer), who was
 said to have been born in the house and never to have left it for more 
than four days in his lifetime. Willy Lott's house has survived to this 
day practically unaltered, but none of the original trees in the 
painting exist today. The water level is also higher as that area of 
East Anglia has sunk into the sea by one foot (30 cm) since Constable's 
time.</p>

<p>The Hay Wain is revered today as one of the greatest British 
paintings, but when it was originally exhibited at the Royal Academy in 
1821 (under the title Landscape: Noon) it failed to find a buyer. It was
 considerably better received in France where it was praised by Théodore
 Géricault. The painting caused a sensation when it was exhibited with 
other works by Constable at the 1824 Paris Salon (it has been suggested 
that the inclusion of Constable's paintings in the exhibition were a 
tribute to Géricault, who died early that year). In that exhibition The 
Hay Wain was singled out for a gold medal awarded by Charles X of 
France, a cast of which is incorporated into the picture's frame. The 
works by Constable in the exhibition inspired a new generation of French
 painters, including Eugène Delacroix.</p>

<p>The painting was voted the second best painting in Britain in a 2005 
poll organised by the Today programme in September 2005. It is currently
 exhibited at the National Gallery in London.</p>
<p>Source Wikipedia.</p> 

</div>
</div>



</div> <!-- end of info -->
<div id="info_right">
<div class="box250">
<h3>CSS play Support</h3>
<div style="width:248px; border:1px solid #ddd; background:#fff; border-width:0 1px; text-align:center;">
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div>
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="3206316" type="hidden">
<input src="fade_files/paypal2.png" name="submit" alt="PayPal - The safer, easier way to pay online." type="image">
<img alt="" src="fade_files/pixel.gif" width="1" height="1">
</div>
</form>
</div>
</div>

<div class="box250">
<h3>CSS play Recommend</h3>
<p>
<a class="bannerad" href="http://www.dynamicdrive.com/style/"><img src="fade_files/dynamicdrive.gif" alt="Free, practical CSS menus, layouts, and examples" title="Free, practical CSS menus, layouts, and examples" width="220" height="100"></a>
</p>
<b class="clear"></b>
</div>

<div class="box250">
<h3>Follow CSS play</h3>
<p>
<a href="http://www.facebook.com/pages/CSS-play/133940426647902" rel="nofollow"><img src="fade_files/facebook.png" alt="Facebook"></a>&nbsp;&nbsp;&nbsp;<a href="http://twitter.com/stucssplay" rel="nofollow"><img src="fade_files/twitter.png" alt="Twitter"></a>&nbsp;&nbsp;&nbsp;<a href="http://www.cssplay.co.uk/facebook-fan-page.html" rel="nofollow"><img src="fade_files/fanpage.jpg" alt="Facebook Fan Page"></a>
</p>
<b class="clear"></b>
</div>


<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 250x250, created 2/2/11 */
google_ad_slot = "3830893092";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript" src="fade_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:250px"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:250px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_0" name="aswift_0" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="250" frameborder="0" height="250"></iframe></ins></ins>

<br><br>




<div style="padding-left:15px; height:100px;">
<script type="text/javascript">
Vertical1241863 = false;
ShowAdHereBanner1241863 = true;
RepeatAll1241863 = false;
NoFollowAll1241863 = false;
BannerStyles1241863 = new Array(
    "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;}",
    "img{border:0; margin-bottom:8px;}",
    "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;}",
    "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1241863/1241863.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script><script src="fade_files/1241863.js" type="text/javascript"></script><style type="text/css">div.bsap_1241863 {width:100%;display:block;} div.bsap_1241863 a{width:220px;} div.bsap_1241863 a img{padding:0;} div.bsap_1241863 a em{font-style:normal;} div.bsap_1241863 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;} div.bsap_1241863 img{border:0; margin-bottom:8px;} div.bsap_1241863 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;} div.bsap_1241863 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div.bsap_1241863 a.adhere{width:220px;height:100px;line-height:800%;} html>body div.bsap_1241863 a.adhere{width:218px;height:98px;} div.bsap_1241863 img.s{height:0;width:0;}div#bsap_1241863 {width:100%;display:block;} div#bsap_1241863 a{width:220px;} div#bsap_1241863 a img{padding:0;} div#bsap_1241863 a em{font-style:normal;} div#bsap_1241863 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;} div#bsap_1241863 img{border:0; margin-bottom:8px;} div#bsap_1241863 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;} div#bsap_1241863 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsap_1241863 a.adhere{width:220px;height:100px;line-height:800%;} html>body div#bsap_1241863 a.adhere{width:218px;height:98px;} div#bsap_1241863 img.s{height:0;width:0;}</style><script type="text/javascript"> _bsap.drop("1e5949aa72023d7e6519f404fd6280d6", 1241863); </script><div id="bsap_1241863" class="bsap_1241863 bsap"><a href="http://stats.buysellads.com/click.go?z=1241863&amp;b=993977&amp;g=&amp;s=&amp;sw=1680&amp;sh=1050&amp;br=firefox,4,win&amp;r=0.808541074599426&amp;link=http://www.squarespace.com/signup2/?source=cssplay2&amp;campaign=createwebsites&amp;utm_source=cssplay2&amp;utm_medium=banner&amp;utm_campaign=createwebsites" onmouseover="window.status = 'http://www.squarespace.com/signup2/?source=cssplay2&amp;campaign=createwebsites&amp;utm_source=cssplay2&amp;utm_medium=banner&amp;utm_campaign=createwebsites'; return true;" onmouseout="window.status=''; return true;" class="ad1 odd" title="Squarespace | Create beautiful websites." id="bsa_993977" target="_blank"><img src="fade_files/55086-1301083375.png" alt="Squarespace | Create beautiful websites." width="220" height="100"></a></div>
</div>
<!-- moved to cssplay-pages --><br> <!-- now moved to code -->
</div>


<div id="content">
<div class="plain752" style="margin-top:-15px;">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 728x90, created 3/24/09 */
google_ad_slot = "2160454816";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="fade_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px"><ins id="aswift_1_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_1" name="aswift_1" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="728" frameborder="0" height="90"></iframe></ins></ins>
</div>
<br class="clear"><br>
<div class="prevNext"><a href="http://www.cssplay.co.uk/opacity/picturemenu.html" accesskey="P" title="Previous Demonstration" class="prevDemo"><b>PREVIOUS</b></a><a href="http://www.cssplay.co.uk/opacity/png.html" accesskey="N" title="Next Demonstration" class="nextDemo"><b>NEXT</b></a></div>
<div id="left_column">
<h3>Information</h3>

<p>Another 'just for fun' demonstration using opacity and a single image.</p>
<p>If your are using Firefox 2.0 then just touch the side of the 
miniature image, if you are using Opera, IE5.5, IE6, IE7, Netscape or 
Mozilla then move the mouse to the centre of the miniature to see the 
effect.</p>

<div>
<br>
<div class="plain470">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 468x60, created 3/20/09 */
google_ad_slot = "7558797043";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="fade_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><ins id="aswift_2_anchor" style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_2" name="aswift_2" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="468" frameborder="0" height="60"></iframe></ins></ins>
</div>
<br class="clear"><br>
</div>

<h3>Copyright</h3><p>You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to <b class="css">CSS</b><span class="play">play</span> is always appreciated.</p><p>Commercial
 usage is also permitted without seeking approval, but I would ask that a
 donation is considered to support my work on CSSPlay.</p>
<p>If you are having problems integrating any of my demonstrations into 
your website then I now offer a service to fault find and correct any 
errors that you may have introduced. Please email me for more 
information.</p><br>

</div>


<div id="right_column">
<br>
<div class="plain250">
<div>
<span class="spacer"></span>

<ul class="cssplay">
<li>
<a href="http://www.essexpens.co.uk/">promotional pen</a><br></li></ul>
</div>
</div>

<div class="plain250">
<div>
<span class="spacer"></span>
<ul class="cssplay">
<li>
Each week the Creare Group produce video tutorials for <a href="http://www.crearecommunications.co.uk/">SEO</a> and tips and tricks for the <a href="http://www.crearedesign.co.uk/">web design</a> industry.
</li></ul>
</div>
</div>

<div class="plain250">
<div>
<span class="spacer"></span>
<ul class="cssplay">
<li>
Web designers <a href="http://www.protectyourbubble.com/li-laptop-insurance.html">insure your laptop</a> or macbook with Protect Your Bubble
</li></ul>
</div>
</div>


<div class="box250">
<h3 class="blank">&nbsp;</h3>
<ul class="cssplay">
<li><a href="http://www.uk-cheapest.co.uk/">Register Domain Name</a></li>
<li><a href="http://www.webcreationuk.com/">website design</a> company providing number 1 services for website design and SEO</li>
<li><a href="http://www.online-artikel.de/">Online PR-Portal</a> <b>Social Media News</b><br><span class="text">Our Press releases you can read on OA News</span></li>
<li><a href="http://www.justsearching.co.uk/">Search engine optimisation</a><span class="text"><br>Search engine optimisation specialists to companies throughout the UK and the World</span></li>
<li><a href="http://www.hitsearchlimited.com/seo.php">SEO</a></li>
<li><span class="text">For your one stop shop for all your digital marketing including <a href="http://www.propadesign.co.uk/">web design</a> use propaganda</span></li>
<li><a href="http://www.biteus.net/">SEO</a></li>
<li><a href="http://www.marketingquotes.co.uk/website-design/">website designers</a>&nbsp;Compare local website design prices today</li>
<li><a href="http://www.lava.com.au/">Web Design</a></li>
</ul>
</div>



<div class="box250">
<h3>CSS play Testimonial</h3>
<p>"The <a href="http://www.citroen.co.uk/" rel="nofollow"><img src="fade_files/citroenlogo.gif" alt="citroen.co.uk"></a> web site uses<br>CSS play code for the site drop down menus.<br>This code works seamlessly in IE 6 &amp; 7, and is an excellent solution to the Creative requirements of the site."<br><br>
Damon Clark - Brandwidth</p>
</div>
<div class="box250">
<h3>CSS play Links</h3>
<ul>
<li><a href="http://www.cssplay.co.uk/favicon_ads.html">Favicon Advertising</a></li>
<li><a href="http://www.cssplay.co.uk/ads_page.html">Advertising rates</a></li>
<li><a href="http://www.cssplay.co.uk/service.html">Web design &amp; assistance</a></li>
<li><a href="http://www.istu.co.uk/" rel="nofollow"><b>i Stu</b> - NEW website!</a></li>
</ul>
</div>
 

</div> <!-- end of right column -->
</div> <!-- end of content -->



	<div id="foot">
		<p>© 2005-2011 stu nicholls - cssplay.co.uk - all rights reserved</p>
		<ul>
		<li><a href="http://www.icra.org/sitelabel/" rel="nofollow">ICRA checked site</a></li>
		<li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict!" rel="nofollow">xhtml 1.0 Strict</a></li>
		<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/opacity/fadein.html" title="Valid CSS!" rel="nofollow">css 1/2/3</a></li>
		</ul>
		</div>
	</div> <!-- end of wrapper -->

<script src="fade_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>


</body></html>